<template>
  <div id="bidd-detail">
    <div class="bidd-box">
      <div class="bidd-header">
        <div class="title">
          <span @click="goIndex" style="cursor: pointer">投标</span>
          &nbsp;&nbsp;>&nbsp;&nbsp;招标详情
        </div>
        <div :class="className" class="typebox">
          <span>
            当前状态:
            <span style="padding-left: 10px">
              {{ biddFrom.processSon | biddType }}
            </span>
          </span>
          <p></p>
        </div>
      </div>
      <div class="bidd-content">
        <el-button
          :class="{ disa: !biddFrom.gotoBid || biddFrom.processSon !== 2 }"
          class="exportBtn addbidd"
          @click="goTender"
          :disabled="!biddFrom.gotoBid || biddFrom.processSon !== 2"
        >
          <i class="iconfont icon-judge"></i> 投标
        </el-button>
        <check-bidd-from :bidd="biddFrom" :downLoad="2"></check-bidd-from>
      </div>
    </div>
    <el-dialog
      width="1200px"
      :center="true"
      title="填写投标书"
      :close-on-click-modal="false"
      :visible.sync="tenderVisiable"
      v-if="tenderVisiable"
    >
      <Tender-Fill :Id="biddingId" @close="close"></Tender-Fill>
    </el-dialog>
  </div>
</template>

<script>
import TenderFill from '../../components/TenderFill.vue'
import checkBiddFrom from '../personal/biddManage/components/checkBiddFrom.vue'
export default {
  components: { checkBiddFrom, TenderFill },
  data() {
    return {
      biddFrom: {},
      tenderVisiable: false,
      biddingId: null
    }
  },
  beforeMount() {
    this.getData()
  },
  computed: {
    className() {
      let className = ''
      switch (this.biddFrom.processSon) {
        case 2:
          className = 'succ'
          break
        case 3:
        case 60:
        case 61:
        case 62:
          className = 'defa'
          break
        case 5:
          className = 'warn'
          break
        case 50:
        case 51:
          className = 'err'
          break
        default:
          break
      }
      return className
    }
  },
  filters: {
    // 过滤招标状态
    biddType(val) {
      switch (val) {
        case 2:
          return '招标中'
        case 3:
          return '已截标'
        case 5:
          return '已入围'
        case 50:
        case 51:
          return '已中标'
        case 60:
        case 61:
        case 62:
          return '已流标'
        default:
          break
      }
    }
  },
  mounted() {},
  methods: {
    goIndex() {
      this.$router.push('/')
    },
    close() {
      this.tenderVisiable = false
      this.getData()
    },
    // 打开填写投标单对话框
    goTender() {
      let islogin = this.$store.state.whetherLogin
      // 是否登录
      if (islogin) {
        // 登录了，打开投标填写
        this.tenderVisiable = true
      } else {
        // 未登录，跳转至登录页
        this.$router.push('/login')
      }
    },
    getData() {
      // 从路由上获取到招标书id
      this.biddingId = parseInt(this.$route.params.id)
      this.$https({
        method: 'post',
        url: '/purchaseAdmin/biddingInfoById/?id=' + this.biddingId
      })
        .then(res => {
          if (res.code === 0) {
            this.biddFrom = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    addIndex(index) {
      return index + 1 + (this.size - 1) * this.page
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    }
  }
}
</script>
<style lang="less">
#bidd-detail {
  .bidd-box {
    .el-upload {
      display: none;
    }
    .el-upload-list {
      display: flex;
      align-items: center;
      width: 600px;
      flex-wrap: wrap;
      .el-upload-list__item {
        width: 260px;
        margin: 20px 30px 0 0;
        background: #f0f1f2;
        border: 1px solid #d6d6d6;
      }
      .el-upload-list__item.is-success .el-upload-list__item-status-label {
        display: none;
      }
      .el-upload-list__item .el-icon-close {
        display: none;
        &:hover {
          display: none;
        }
      }
      .el-upload-list__item .el-icon-close-tip {
        display: none;
        &:hover {
          display: none;
        }
      }
    }
    .el-form-item__label-wrap {
      margin-left: 0 !important;
    }
  }
}
</style>
<style lang="less" scoped>
#bidd-detail {
  width: 100%;
  background-color: #f8f8f8;
  display: flex;
  justify-content: center;
  .quotation {
    margin-top: 20px;
    .quotation_table {
      width: 80.4%;
    }
  }

  h1 {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    padding-left: 10px;
    border-left: 4px solid #fa7355;
    span {
      font-weight: normal;
      color: #999;
    }
  }
  .bidd-box {
    width: 1200px;
    background-color: #fff;
  }
  .bidd-content {
    position: relative;
    padding: 30px 50px 30px 16px;
    h1 {
      font-size: 16px;
      font-weight: 500;
      color: #333;
      padding-left: 10px;
      border-left: 4px solid #fa7355;
      span {
        font-weight: normal;
        color: #999;
      }
    }
    .addbidd {
      position: absolute;
      width: 88px;
      height: 34px;
      top: 30px;
      right: 50px;
      .icon-judge {
        font-size: 14px;
      }
    }
    .disa {
      color: #fff !important;
      background-color: #ccc !important;
      border: #ccc !important;
      &:hover {
        color: #fff !important;
      }
    }
  }
  .bidd-header {
    .title {
      padding: 30px 0 20px 16px;
      font-size: 16px;
      font-weight: 500;
      color: #333;
    }
  }
  .typebox {
    width: 200px;
    height: 36px;
    display: flex;
    align-items: center;
    position: relative;
    span {
      padding-left: 16px;
      color: #fff;
    }
    p {
      position: absolute;
      right: 0;
      width: 0;
      height: 0;
      border: 18px solid transparent;
      border-right: 18px solid #fff;
    }
  }
  .succ {
    background-color: #30c776;
  }
  .err {
    background-color: #ff0000;
  }
  .warn {
    background: #ff9f0f;
  }
  .defa {
    background: #999999;
  }
}
</style>
